<script>
export default {
  name: "Index",
  methods:{
    //跳转页面的方法
    toPage1(){
      //路由跳转page1
      this.$router.push({path:'/page1',query:{username:'李四'}})
    },
    toPage2(){
      //路由跳转page1
      this.$router.push({path:'/page2',query:{age:20}})
    }
  }
}
</script>

<template>
<div>
  <!--    超链接跳转到page1-->
  <router-link to="/page1?username=zhangsan">跳转到页面1</router-link>
  <br>
  <!--    通过代码做跳转-->
  <button @click="toPage1()">跳转到页面1</button>
  <br>
  <!--    超链接跳转到page1-->
  <router-link to="/page2?age=12">跳转到页面2</router-link>
  <br>
  <!--    通过代码做跳转-->
  <button @click="toPage2()">跳转到页面2</button>
</div>
  <div>
    <router-view/>
  </div>
</template>

<style>
div{
  float: left;
}
</style>